import { connect, ConnectedProps } from "react-redux"
import { RootState } from "../../redux/store"
import { User } from "../../api/model/searchTypes"

const connector = connect(
  (state: RootState) => ({
    firstView: state.search.firstView,
    loading: state.search.loading,
    errMsg: state.search.errMsg,
    users: state.search.users,
  }),
  {} // 这里需要空对象
)

// 定义类型
type Props = ConnectedProps<typeof connector>

function SearchMain({ firstView, loading, errMsg, users }: Props) {
  if (firstView) {
    return <h3>输入关键字搜索</h3>
  } else if (loading) {
    return <h3>加载中...</h3>
  } else if (errMsg) {
    return <h3>{errMsg}</h3>
  }

  // [{login, avatar_url, html_url}]

  return (
    <div className="row">
      {users.map((user: User) => (
        <div className="card" key={user.id}>
          <a href={user.html_url} target="_blank">
            <img src={user.avatar_url} style={{ width: 100 }} />
          </a>
          <p className="card-text">{user.login}</p>
        </div>
      ))}
    </div>
  )
}

export default connector(SearchMain)
